<template>
  <div class="short-comment">
    <div class="short-comment-count vux-1px-b" v-show="comments.length>0" @click="toggleShortCommentShow">
      {{comments.length}}条段短评
      <i class="icon iconfont" :class="showType ? 'icon-updouble':'icon-downdouble'"></i>
    </div>
    <ul class="comment-list" v-if="showType" ref="shortCommentList">
      <li class="comment-item vux-1px-b" v-for="item in comments">
        <img v-lazy.shortCommentList="item.avatar" class="avatar">
        <div class="comment-content">
          <span class="author">{{item.author}}</span>
          <i class="icon iconfont icon-dianzan">{{item.likes}}</i>
          <p class="text">{{item.content}}</p>
          <template v-if="item.reply_to !== undefined">
            <p class="reply">
              <span class="reply-author">//{{item.reply_to.author}}:</span>
              {{item.reply_to.content}}
            </p>
          </template>
          <span class="date">{{changeTime(item.time)}}</span>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
  import axios from "axios";
  import moment from "moment";
  export default {
    props: ["id"],
    data() {
      return {
        comments: [],
        showType: false
      }
    },
    created() {
      this.getData();
    },
    methods: {
      // 获取长评论数据
      getData() {
        axios
          .get("api/story/" + this.id + "/short-comments")
          .then(response => {
            this.comments = response.data.comments;
          })
          .catch(error => {
            console.log(error);
          });
      },
      // 切换短评展示
      toggleShortCommentShow() {
        this.showType = !this.showType;
        this.$emit('unfold', this.showType);
      },
      // 转换时间戳
      changeTime(time) {
        return moment(time).format('MM-DD HH:mm');
      }
    }
  };

</script>
<style lang="less" scoped>
  .short-comment {
    overflow: hidden;
    .short-comment-count {
      position: relative;
      z-index: 9999;
      font-size: 16px;
      color: #333;
      line-height: 1.5em;
      font-weight: 700;
      margin: 0;
      padding: 9px 20px;
      .icon {
        font-size: 22px;
        float: right;
      }
    }
    .comment-list {
      padding: 0;
      .comment-item {
        display: flex;
        font-size: 15px;
        color: #666;
        padding: 20px;
        .avatar {
          flex: 0 0 40px;
          width: 40px;
          height: 40px;
          border-radius: 50%;
        }
        .comment-content {
          flex: 1;
          padding-left: 10px;
          .author {
            font-size: 19px;
            color: #000;
            font-weight: 400;
          }
          .icon-dianzan {
            float: right;
            color: #b4b4b4;
          }
          .text {
            margin: 10px 0;
            line-height: 18px;
          }
          .reply {
            margin: 10px 0 !important;
            color: #929292;
            line-height: 18px;
            .reply-author {
              color: #000;
            }
          }
          .date {
            color: #ccc;
          }
          .expand {
            display: block;
            float: right;
            width: 45px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            background: #d8e4f2;
          }
        }
      }
    }
  }

</style>
